<template>
  <div class="inbo">
    <el-form-item :label="bt" v-show="upload.uploadVisible" >
      <el-upload ref="upload" :limit="10" action="" :style="{width: '600px',height:'200px'}"
                  :auto-upload="false" drag :file-list="upload.uploadFiles" name="upfile_fj"
                  :on-change="handleUploadChange" :on-remove="handleUploadRemove" :before-remove="handleUploadBeforeRemove">
                  <i class="el-icon-upload" />
                  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                </el-upload>
    </el-form-item>
  </div>
</template>

<script>
import { uploadFile } from '@/api/syfxxtApi/khfw/FuncTest/api.js'
import { size } from 'lodash';
import { status } from 'nprogress';
export default {
  data() {
    return {
      upload: {  //上传配置
        uploadVisible: true, //上传项是否显示，在查看时不显示
        uploadFiles: [], //已上传文件列表
      },

    }
  },
  props: {
    bt: {
      type: String,
      default: "附件"
    },

  },
  mounted() {
  },
  computed: {

  },
  methods: {
    //上传文件改变事件
    handleUploadChange(file, filelist) {
      var _fileData = new FormData();
      _fileData.append("bizPath", "syfxxt/khfw");
      _fileData.append("uploadType", "minio");
      _fileData.append("file", file.raw, file.name);
      uploadFile(_fileData).then((res) => {
        if (res.data.code === 200) {
          file.minioID = res.data.data.split(":")[0];
          file.filename = file.name;
          this.upload.uploadFiles = filelist.map((i)=>{
            return {
              status: i.status,
              name: i.name,
              size: i.size,
              percentatage: i.percentatage,
              raw:{uid: i.uid},
              minioID: i.minioID,
              filename: i.filename,
              uid: i.uid,
            }
          });
          this.$emit('fun', this.upload)
        } else {
          this.$message.error({ content: '上传失败!', placement: 'center' })
          filelist.splice(filelist.indexOf(file), 1);
          this.upload.uploadFiles = filelist;
          this.$emit('fun', this.upload)
        }
      })
        .catch(() => {
          this.$message.error({ content: '上传失败!', placement: 'center' });
          filelist.splice(filelist.indexOf(file), 1);
          this.upload.uploadFiles = filelist;
          this.$emit('fun', this.upload)
        });
    },
    //上传文件删除事件
    handleUploadRemove(file, filelist) {
      this.upload.uploadFiles = filelist;
      this.$emit('fun', this.upload)
      if (file.fileid && file.fjid) {
        submit_delfile_fj({ fileid: file.fileid, fjid: file.fjid, zscqid: file.zscqid })
          .then((res) => {
            if (res.success) {
              this.$message.success({ content: '删除成功!', placement: 'center' })
            } else {
              this.$message.error({ content: '删除失败!', placement: 'center' })
            }
          })
          .catch(() => {
            this.$message.error({ content: '删除失败!', placement: 'center' })
          });
      }
    },
    //上传文件删除前事件
    handleUploadBeforeRemove(file, filelist) {
      if (file.fileid && file.fjid) {
        return this.$modal.confirm("该文件已上传，确认删除该文件？");
      } else {
        return true;
      }
    },

  }
};
</script>

<style scoped>
.inbo {
  display: inline-block;
}

.pagination-container {
  /* background: #fff; */
  padding: 23px 0 20px;
}

.pagination-container.hidden {
  display: none;
}
</style>